<div>
  <h2 class="crayons-subtitle-1 mb-4">Abuse reports</h2>
  <ul class="crayons-navigation crayons-navigation--horizontal mb-4">
    <li>
      <a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Open" %>">Open/Unresolved</a>
    </li>
    <li>
      <a href="<%= admin_reports_path(state: @feedback_type, status: "Resolved") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Resolved" %>">Resolved</a>
    </li>
    <li>
      <a href="<%= admin_reports_path(state: @feedback_type, status: "Invalid") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Invalid" %>">Invalid</a>
  </ul>

  <div id="vomitReactions" class="mt-2">
    <details class="crayons-card w-100 cursor-pointer">
      <summary class="crayons-subtitle-2 p-5" id="vomitReactionsHeader">
        Flag Reactions
        <% if @status == "Open" %>
          (<%= @vomits.size %>)
        <% end %>
      </summary>
      <div id="vomitReactionsBodyContainer" aria-labelledby="vomitReactionsHeader" data-parent="#vomitReactions">
        <div class="crayons-card__body" style="overflow: scroll; max-height: 500px;">
          <% @vomits.each do |reaction| %>
            <div
              class="flex justify-between"
              data-controller="reaction"
              data-reaction-id-value="<%= reaction.id %>"
              data-reaction-url-value="<%= admin_reaction_path(reaction.id) %>">
              <span>
                <%= crayons_icon_tag("twemoji/flag", native: true, class: "mr-1", aria_hidden: true) %> <a href="<%= reaction.user.path %>" target="_blank" rel="noopener">@<%= reaction.user.username %></a>
                <% if reaction.user_id == Settings::General.mascot_user_id %>
                  <strong>(auto-generated)</strong>
                <% end %>
              </span>
              <span>
                <strong><%= reaction.reactable_type %>:</strong>
                <a href="<%= reaction.reactable.path %>" target="_blank" rel="noopener"><%= reaction.reactable_type == "User" ? reaction.reactable.username : reaction.reactable.title %></a>
                <% if reaction.reactable_type == "User" && reaction.reactable.spam? %>
                  <span class="c-indicator c-indicator--danger">Spam</span>
                <% elsif reaction.reactable_type == "User" && reaction.reactable.suspended? %>
                  <span class="c-indicator c-indicator--danger">Suspended</span>
                <% end %>
                <% if reaction.reactable_type == "User" && reaction.reactable.vomited_on? %>
                  <span class="c-indicator c-indicator--warning">Flagged</span>
                <% end %>
              </span>
              <span>
                <% if params[:status] == "Open" || params[:status].blank? %>
                  <% if reaction.reactable_type == "User" %>
                    <button
                      class="crayons-btn crayons-btn--success crayons-btn--s"
                      type="button"
                      data-reactable="user"
                      data-status="confirmed"
                      data-reaction-target="confirmed"
                      data-action="reaction#reactableUserCheck">
                      CONFIRM
                    </button>
                  <% else %>
                    <button
                      class="crayons-btn crayons-btn--success crayons-btn--s"
                      type="button"
                      data-reactable="non-user"
                      data-status="confirmed"
                      data-reaction-target="confirmed"
                      data-action="reaction#reactableUserCheck">
                      CONFIRM
                    </button>
                  <% end %>
                  <button
                    class="crayons-btn crayons-btn--danger crayons-btn--s"
                    type="button"
                    data-altstatus="invalid"
                    data-reaction-target="invalid"
                    data-action="reaction#updateReactionInvalid">
                    INVALID
                  </button>
                <% end %>
                <% if params[:status] == "Resolved" %>
                  <button
                    class="crayons-btn crayons-btn--warning crayons-btn--s"
                    type="button"
                    data-altstatus="invalid"
                    data-reaction-target="invalid"
                    data-action="reaction#updateReactionInvalid">
                    INVALIDATE
                  </button>
                  <% elsif params[:status] == "Invalid" %>
                  <button
                    class="crayons-btn crayons-btn--success crayons-btn--s"
                    type="button"
                    data-status="confirmed"
                    data-reaction-target="confirmed"
                    data-action="reaction#updateReactionConfirmed">
                    MARK AS VALID
                  </button>
                <% end %>
              </span>
            </div>
            <hr id="js__reaction__div__hr__<%= reaction.id %>">
          <% end %>
        </div>
      </div>
    </details>
  </div>
</div>
